import React, { useEffect, useState } from 'react';
import { SearchComponApi } from './type';
import { Col, Form, InputNumber, Row } from 'antd';

import cls from 'classnames';
import numberRanageCls from '../../styles.less';

export const SearchNumberRanage: React.FC<SearchComponApi.IPropsType> = (props) => {
  let {
    opt: { clearNum, setClearNum },
  } = props;

  /**
   * 保存输入数值范围
   */
  const [numberRangeInfo, setNumberRangeInfo] = useState<Record<string, any>>({
    min: null,
    max: null,
  });

  useEffect(() => {
    if (clearNum) {
      setNumberRangeInfo({
        min: null,
        max: null,
      });
      setClearNum(false);
    }
  }, [clearNum]);

  return (
    <Col
      md={props?.opt?.whetherSenior ? 24 : props?.opt?.md ? props?.opt?.md : 4}
      sm={props?.opt?.whetherSenior ? 24 : props?.opt?.sm ? props?.opt?.sm : 24}
      key={props?.opt?.name}
    >
      <Form.Item
        style={{ ...props?.opt?.itemStyle }}
        // name={props?.opt?.name}
        name={undefined}
        label={props?.opt?.whetherSenior ? `${props?.opt?.label}` : ''}
        className={cls('drawer-form-item')}
      >
        <Row className={numberRanageCls['searchForm-numberRanage']}>
          <Col span={11} className={'searchForm-numberRanage-leftNumber'}>
            <Form.Item style={{ ...props?.opt?.itemStyle }} name={props?.opt?.name + 'Min'} label={''} className={cls('drawer-form-item')}>
              <InputNumber
                placeholder={`${props?.opt?.placeholder}小`}
                controls={false}
                onChange={(value: string | null) => {
                  setNumberRangeInfo({
                    ...numberRangeInfo,
                    min: value,
                  });
                }}
                max={numberRangeInfo?.max}
                stringMode={true}
              />
            </Form.Item>
          </Col>
          <Col span={2} className={'searchForm-numberRanage-centerNumber'}>
            ~
          </Col>
          <Col span={11} className={'searchForm-numberRanage-rightNumber'}>
            <Form.Item style={{ ...props?.opt?.itemStyle }} name={props?.opt?.name + 'Max'} label={''} className={cls('drawer-form-item')}>
              <InputNumber
                placeholder={`${props?.opt?.placeholder}大`}
                controls={false}
                onChange={(value: string | null) => {
                  setNumberRangeInfo({
                    ...numberRangeInfo,
                    min: value,
                  });
                }}
                min={numberRangeInfo?.min}
                stringMode={true}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form.Item>
    </Col>
  );
};
